{block name="content"}
<div class="iframe-pagination notfooter">
    <fieldset>
        <legend>{:lang('条件搜索')}</legend>
        <form action="{:sysuri()}" id="ProblemDataSearch" autocomplete="off" class="layui-form layui-form-pane form-search" method="get" onsubmit="return false">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">{:lang('问题标题')}</label>
                <label class="layui-input-inline">
                    <input class="layui-input" name="name" placeholder="{:lang('请输入问题标题')}" value="{$get.name|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">{:lang('问题答案')}</label>
                <label class="layui-input-inline">
                    <input class="layui-input" name="content" placeholder="{:lang('请输入问题答案')}" value="{$get.content|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">{:lang('创建时间')}</label>
                <label class="layui-input-inline">
                    <input class="layui-input" data-date-range name="create_time" placeholder="{:lang('请选择创建时间')}" value="{$get.create_time|default=''}">
                </label>
            </div>

            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> {:lang('搜 索')}</button>
            </div>
        </form>
    </fieldset>
    <table id="ProblemData" data-url="{:sysuri()}" data-target-search="#ProblemDataSearch"></table>
</div>
{/block}

{block name='script'}
<script>
    $(function () {
        // 初始化表格组件
        $('#ProblemData').layTable({
            even: true, height: 'full',
            sort: {field: 'sort desc,id', type: 'desc'},
            cols: [[
                {field: 'id', title: 'ID', width: 60, align: 'center', sort: true},
                {field: 'name', title: '{:lang("问题标题")}', align: 'left', minWidth: 100},
                {field: 'content', title: '{:lang("问题答案")}', align: 'left', minWidth: 140, templet: '<div>{{d.content||"-"}}</div>'},
                {field: 'num_read', title: '{:lang("阅读数")}', align: 'center', width: 90, sort: true, style: 'color:blue;font-size:16px'},
                {field: 'status', title: '{:lang("状态")}', align: 'center', width: 80, templet: '#StatusSwitchProblemDataTpl'},
                {field: 'create_time', title: '{:lang("创建时间")}', align: 'center', width: 170, sort: true},
                {toolbar: '#SelectToolbar', title: '{:lang("操作面板")}', align: 'center', width: 100}
            ]]
        }).trigger('tool', function (item) {
            window.setItemValue(item.data.id, item.data.name);
            item.tr.parents('div.layui-layer-page').find('.layui-layer-close').trigger('click');
        });
    });
</script>

<!-- 操作工具条模板 -->
<script type="text/html" id="SelectToolbar">
    <a class="layui-btn layui-btn-sm" lay-event="select">{:lang('选 择')}</a>
</script>

<!-- 数据状态切换模板 -->
<script type="text/html" id="StatusSwitchProblemDataTpl">
    {{-d.status ? '<b class="color-green">' + '{:lang("已激活")}' + '</b>' : '<b class="color-red">' + '{:lang("已隐藏")}' + '</b>'}}
</script>

{/block}